import React, {Component} from 'react';
import './index.css'

class List extends Component {
    render() {
        const {users,isFirst,isLoading,err} = this.props
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎使用，请输入关键字</h2> :
                        isLoading ? <h2>Loading......</h2> :
                            err ? <h2 style={{color: 'red'}}>{err} </h2> :
                    users.map((userObj)=>{
                        return(
                            <div key={userObj.id} className="card">
                                <a rel="noreferrer" href={userObj.html_url} >
                                    <img alt={'head_portrait'} src={userObj.avatar_url} style={{width: '100px'}}/>
                                </a>
                                <p className="card-text">{userObj.login}</p>
                            </div>
                        )
                    })
                }

            </div>
        );
    }
}

export default List;
